<template>
  <!-- .prevent 修饰符阻止了超链接的默认行为（跳转到百度页） -->
  <a href="http://www.baidu.com" @click.prevent="say('baiDu')">百度</a>

  <div class="divArea" @click="say('DIV')">
    <button @click.stop="say('BUTTON')">冒泡按钮</button>
    <!-- .stop：阻止产生冒泡事件 -->
  </div>

  <div class="divArea" @click.self="say('DIV')">
    <!-- .self：只在该元素上触发事件有效，其子元素无效 -->
    <button>我是一普通的按钮</button>
  </div>

  <!-- .passive：先执行默认行为，不考虑执行的代码中是否包含 event.preventDefault() -->
  <a href="http://www.baidu.com" @click.passive="eventPrevent">百度</a>

  <!-- .self：只在该元素上触发事件有效，其子元素无效 -->
  <div class="divArea" @click.self="say('DIV')">
    <button>我是一普通的按钮</button>
  </div>

  <!-- .once：绑定的事件只触发一次 -->
  <button @click.once="say('BUTTON')">点我试一下</button>
</template>

<script>
export default {
  methods: {
    say(name) {
      // 打招呼
      window.alert('你好：' + name)
    },
    eventPrevent() {
      event.preventDefault() // 阻止事件默认行为
    },
  },
}
</script>

<script setup>
function say(name) {
  // 打招呼
  window.alert('你好：' + name)
}

function eventPrevent() {
  // 阻止事件默认行为
  event.preventDefault()
}
</script>

<style scoped>
.divArea {
  padding: 30px;
  border: 2px solid blue;
}
</style>
